import React from 'react';
import ReactDOM from 'react-dom';

import { createStore } from 'redux';

function run() {

    let counter = {
        value: 1000
    }

    // 定义一个 Reducer (它是个纯函数)
    const reducer = function( state = counter, action ) {
        switch( action.type ) {
            case 'INCREASE':
                console.log( action.payload.message );
                return { value : state.value + 1 }
            ;
            case 'DECREASE':
                return { value : state.value - 1 }
            ;
            default:
                return state ;
        }
    };

    // 根据给定的 reducer 创建 store 实例
    const store = createStore( reducer );

    // 监听状态变化
    store.subscribe( () => console.log( store.getState() ));

    // let action = { type: 'INCREASE', payload: { message: '增加' } }
    // Action Creator
    let increase = message => {
        return {
            type: 'INCREASE' ,
            payload: { message }
        }
    }
    // 派遣一个 action
    store.dispatch( increase( '增加' ) );
    
}

function App(){
    return (
        <div>
            <button onClick={run}>点我试试</button>
        </div>
    );
}

ReactDOM.render(
  <React.StrictMode>
      <App></App>
  </React.StrictMode>,
  document.querySelector('#root')
);